<template>
  <div class="warpper">
    <!-- 旅游景点 -->
    <div class="title">
      <el-card class="box-card"> 旅游景点 </el-card>
    </div>
    <!-- 条件查询 -->
    <!-- 标题关键字 -->
    <!-- 价格 -->
    <!-- 购买数 -->
    <!-- 发布日期 -->
    <el-card class="box_tabel">
      <div class="tabletitle">
        <h3>旅游景点数据列表</h3>
        <el-button type="primary" class="box">发布旅游景点</el-button>
      </div>
      <div class="table_main">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="编号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="主图" width="90" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180" align="center">
          </el-table-column>
          <el-table-column
            prop="originalCost"
            width="90"
            label="原价格"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="price" label="现价" width="90" align="center">
          </el-table-column>
          <el-table-column prop="type" label="类型" width="90" align="center">
          </el-table-column>
          <el-table-column prop="isSure_date" label="发布日期" align="center">
          </el-table-column>
          <el-table-column
            prop="attention"
            width="70"
            label="收藏数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="buy_num"
            width="70"
            label="购买量"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="name" label="城市" align="center">
          </el-table-column>
          <el-table-column
            prop="collect"
            width="70"
            label="关注量"
            align="center"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="240"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                size="mini"
                type="primary"
                >查看</el-button
              >
              <el-button type="info" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
          <div slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </div>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      tableData: [], // 列表数据
      currentPage: 0,
      total: 0, // 总页数
      page: 1,
      page_size: 10,
      isSure: false, // 是否已发布的标签
    };
  },
  methods: {
    // 获取显示当前最大多少页
    handleSizeChange(val) {
      this.page_size = val;
      this.page = 1;
      this.getTravel_list();
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.page = val;

      this.getTravel_list();
    },
    // 获取数据列表
    getTravel_list() {
      let data = {
        page: this.page,
        page_size: this.page_size,
      };
      this.$get("/home/all_list", data).then((res) => {
        // console.log(res);
        if (res.code == 0) {
          let { data, total } = res;
          console.log(res);
          this.tableData = data;
          this.total = total;
        }
      });
    },
  },
  mounted() {
    // h获取所有的数据列表
    this.getTravel_list();
  },
  watch: {},
  computed: {},
  filters: {},
};
</script>
<style lang="scss" scoped>
.warpper {
  .title {
  }
}

.box_tabel {
  margin-top: 30px;
  .tabletitle {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .pagination-box {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
